import React from 'react';
import logo from './assets/logo.svg';
import './assets/App.css';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'app'
        }
    }
    render() {
        // console.log(this.clickHandle);
        let { name } = this.state;
        return (
            <>
                <div className="App">
                    <header className="App-header">
                        <img src={logo} className="App-logo" alt="logo" onClick={this.clickHandle}/>
                        <p onClick={ this.clickHandle }>
                            Edit <code>src/App.js</code> and save to reload. 
                        </p>
                        <p> { name } </p>
                        <a className="App-link"  href="https://reactjs.org" target="_blank" rel="noopener noreferrer"> Learn React </a>
                    </header>
                </div>
            </>
        );
    }
    // eslint-disable-next-line no-unused-vars
    clickHandle = (event) => {
        // const a = 1;
        this.setState({ name: 'click app' });
    }
}
export default App;